* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  height: 100%;
  width: 100%;
}

:root {
  --primary-color: #409eff;
  /* 蓝色主题 */
  --text-color: #333;
  /* 黑色文字 */
  --background-color: #ffffff;
  /* 白色背景 */
}

[data-theme="black"] {
  --primary-color: #bbbbbb;
  /* 灰色主题 */
  --text-color: #ffffff;
  /* 白色文字 */
  --background-color: #000000;
  /* 黑色背景 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #bbbbbb;
    /* 灰色主题 */
    --text-color: #ffffff;
    /* 白色文字 */
    --background-color: #000000;
    /* 黑色背景 */
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --primary-color: #409eff;
    /* 蓝色主题 */
    --text-color: #333;
    /* 黑色文字 */
    --background-color: #ffffff;
    /* 白色背景 */
  }
}

/* 公共样式 */

/* 按钮公共样式 圆角 */
.button-common-round {
  background-color: #4d84fa;
  color: #ffffff;
  border: none;
  border-radius: 18px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.3s ease;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
}

.button-common-round-white {
  background-color: #ffffff;
  color: #707070;
  border: none;
  border-radius: 18px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.3s ease;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
}



/* 5px */
.button-common-default {
  background-color: #4d84fa;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.3s ease;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
}

/* 白底 */
.button-common--white {
  background: #e5eaff;
  color: #4d84fa;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.3s ease;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  margin-right:  30px;
}

/* 渐变按钮 */
.button-common-gradient {
  background: linear-gradient(270deg, #4d84fa 0%, #4f86fa 2%, #aabaff 100%);
  border-radius: 5px 5px 5px 5px;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

/* display公共样式 */
/* 左右布局 */
.display-info {
  display: flex;
  width: 100%;
}

/* 上下布局 */
.display-info-column {
  display: flex;
  flex-direction: column;
}

.display-padding14  {
  padding: 14px;
  box-sizing: border-box;
}

/* 横向居中*/
.display-common-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* 横向左对齐 */
.display-common-horizontal-left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

/* 纵向左对齐 */
.display-common-vertical-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* 纵向右对齐 */
.display-common-vertical-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 横向右对齐 */
.display-common-horizontal-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* 纵向居中 */
.display-common-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 横向两边 */
.display-common-horizontal-between {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 纵向两边 */
.display-common-vertical-between {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 横向自适应 */
.display-common-horizontal-around {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

/* 纵向自适应 */
.display-common-vertical-around {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

/* 搜索框统一样式穿透 */
